<template>
    <div>
      <h2>接受的名称为:{{studentName}}</h2>
        <!-- 第一种通过父组件的方式 实现子组件向父组件传递数据 -->
      <School :getSchoolName="getSchoolName"></School>

      <!-- 第二种 通过组件自定义事件的方式 实现上面的功能 -->
      <!-- <Student v-on:receiveData="receiveData"></Student> -->

      <!-- 第三种  通过ref来实现上述功能  -->
      <Student ref="studentXfj" @click.native="showMsg"></Student>
      <!-- click 加native之后 会被vue认为是原生的click事件，他会把这个事件的执行者交给student下最外层的div -->
    </div>
</template>
<script>
    import Student from './components/Student'
    import School from './components/School'

    export default {
        name:'App',
        data() {
            return {
                studentName:''
            }
        },
        components:{
            Student,
            School
        },
        methods: {
            getSchoolName(name){
                alert("App收到了" + name)
            },
            receiveData(name,...params){//数组参数
                console.log("App收到了",params)
                this.studentName = name
            },
            receiveData2(){//数组参数
                console.log("第二个自定义事件")
            },
            showMsg(){
                console.log("111");
            }
        },
        mounted() {
            //相当于拿到studentXfj的组件实例，绑定一个自定义事件，这个事件调用指向了了this.receiveData
            this.$refs.studentXfj.$on('receiveData',this.receiveData)

            this.$refs.studentXfj.$on('receiveData2',this.receiveData2)

            //使用这种方式更灵活一点 可以用到定时器等其他的东西
            // setTimeout(()=>{
            //     this.$refs.studentXfj.$on('receiveData',this.receiveData)
            // },3000)

            //绑定自定义事件，仅触发一次
            //this.$refs.studentXfj.$once('receiveData',this.receiveData)

            //可以在这里写匿名函数，但是注意一下this的指向，如果像下面这样写 里面的this.studentName指向的student的vc这样无法给app里的studentName赋值，调整的话可以写成匿名函数
            // this.$refs.studentXfj.$on('receiveData',function(name,...params){
            //     console.log("App收到了",params)
            //     this.studentName = name
            // })
        }
    }
</script>
<style>
</style>